<template>
	<div>
		<h2>7.模板引用【template refs】</h2>
		<div ref="creatrool">这是根元素</div>
		<div>
			<span v-for="(item, i) in list" :key="i" :ref="el => { if (el) divs[i] = el }">{{ item }}--</span>
		</div>
	</div>
</template>

<script>
import {
	ref,
	reactive,
	toRefs,
	computed,
	watchEffect,
	watch,
	onMounted,
	onBeforeMount
} from "vue";
export default {
	setup() {
		// 7. 模版引用
		const creatrool = ref(null);

		onMounted(() => {
			// DOM元素将在初始渲染后分配给ref
			console.log(creatrool.value); // <div>这是根元素</div>
		});

		const list = ref([1, 2, 3]);
		const divs = ref([]);

		// 确保在每次更新之前重置ref
		onBeforeMount(() => {
			console.log("onBeforeMount:", divs.value);
		});
		onMounted(() => {
			//模板 ref 仅在渲染初始化后才能访问。
			divs.value.forEach(v => {
				console.log("遍历：", v); // 取到dom元素
			});
		});
		return {
			creatrool,
			list,
			divs
		};
	}
};
</script>

<style>
</style>